<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Neon Admin Panel">
	<meta name="author" content="">
	
	<title>Neon | Sliders</title>
	

	<link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
	<link rel="stylesheet" th:href="@{/css/entypo.css}">
	<link rel="stylesheet" th:href="@{/css/css.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/css/neon-core.css}">
	<link rel="stylesheet" th:href="@{/css/neon-theme.css}">
	<link rel="stylesheet" th:href="@{/css/neon-forms.css}">
	<link rel="stylesheet" th:href="@{/css/custom.css}">

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<!--调试版-->
	<script src="/js/datav.map.vue.js"></script>

	<script th:src="@{/js/jquery-1.11.0.min.js}"></script>

	<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<!--引入echarts-->
	<script src='/js/echarts.min.js'></script>
	<script src='/js/echarts-liquidfill.js'></script>

	<style type="text/css">
		body{
			margin: 0px auto;
			width:1550px;
			min-width:1024px;
			max-width:100%;
			height:100%;
			background-color:white;
		}
	</style>
	
</head>
<body class="page-body page-fade" data-url="http://neon.dev">

	<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

		<!--调用可复用代码：侧边栏-->
		<div th:insert="~{commons/common::sidebar(active='sensor.html')}"></div>
		<div class="main-content">
			<!--调用可复用代码：头部栏-->
			<div th:insert="~{commons/common::topbar}"></div>

			<hr>


			<h2>设置智能终端传感器</h2>
			<br>

			<div class="row">
				<div class="col-md-12">

					<div class="panel panel-primary" data-collapsed="0">

						<div class="panel-heading">
							<div class="panel-title">
							调节智能终端传感器性能（水平） </div>
						</div>

						<div class="panel-body">

							<h5>水质自动站</h5>
							<div class="slider" data-min="0" data-max="1800" data-value="223"></div>

							<div class="slider slider-green" data-prefix="&pound; " data-min="0" data-max="1800" data-value="465"></div>

							<div class="slider slider-blue" data-prefix="&euro; " data-postfix=",-" data-min="0" data-max="1800" data-value="897"></div>

							<h5>水质在线自动监测仪</h5>
							<div class="slider" data-basic="1" data-min="0" data-max="1800" data-value="120" data-step="10"></div>

							<h5>无人船</h5>
							<div class="slider slider-gold" data-postfix="%" data-min="0" data-max="2000" data-min-val="400" data-max-val="1400"></div>


						</div>

						<div class="panel-body">

							<div class="row">
								<div class="col-md-6">
									<h5>调节智能终端传感器性能（垂直）</h5>
								</div>

								<div class="col-md-6">
									<h5>&nbsp;</h5>
								</div>
							</div>

							<div class="row">
								<div class="col-md-1">
									<div class="slider slider-green" data-vertical="1" data-prefix="&pound; " data-min="0" data-max="1800" data-value="465"></div>
								</div>

								<div class="col-md-1">
									<div class="slider slider-blue" data-vertical="1" data-prefix="&pound; " data-min="0" data-max="1800" data-value="900"></div>
								</div>

								<div class="col-md-1">
									<div class="slider slider-gold" data-vertical="1" data-postfix="%" data-min="0" data-max="2000" data-min-val="400" data-max-val="1400"></div>
								</div>

								<div class="col-md-1">
									<div class="slider" data-vertical="1" data-basic="1" data-min="0" data-max="1800" data-value="1600"></div>
								</div>

								<div class="col-md-push-2 col-md-6">

									<div class="slider" data-min="0" data-max="1800" data-value="223" data-fill="#sample-field"></div>

									<input type="text" class="form-control" id="sample-field" value="">

									<br>
									<br>

									<div class="slider slider-gold" data-postfix="%" data-min="0" data-max="2000" data-min-val="400" data-max-val="1400" data-fill="#sample-field-2"></div>

									<input type="text" class="form-control" id="sample-field-2" value="">

								</div>

							</div>

						</div>

					</div>

				</div>
			</div>

			<div class="row">
				<div class="col-md-12">

					<div class="panel panel-primary" data-collapsed="0">

						<div class="panel-heading">
							<div class="panel-title">
							  智能终端传感器剩余电量（可调节充电）
							</div>
						</div>

						<div class="panel-body">

							<div class="row">

								<div class="col-md-3 col-md-push-1">
									<input class="knob" data-min="0" data-max="10" data-width="145" data-height="145" data-thickness=".25" data-fgcolor="#f7d227" data-bgcolor="#ebebeb" value="1">
								</div>

								<div class="col-md-4 col-md-push-1">
									<input class="knob" data-min="0" data-max="100" data-width="230" data-height="230" data-thickness=".25" data-fgcolor="#21a9e1" data-bgcolor="#303641" value="33">
								</div>

								<div class="col-md-3 col-md-push-1">
									<input class="knob" data-min="0" data-max="300" data-width="145" data-height="145" data-thickness=".25" data-fgcolor="#00b19d" data-bgcolor="#ebebeb" data-anglearc="240" data-angleoffset="-120" value="150">
								</div>

							</div>

						</div>

					</div>

				</div>
			</div>
			<!-- Footer -->
			<footer class="main">
				切勿频繁调节导致电器受损，请保护您的自身安全，谢谢配合！
			</footer>
		</div>

		<!--		聊天框-->
		<div th:insert="~{commons/common::rightbar}"></div>
	</div>

	<!-- Bottom Scripts -->
	<script th:src="@{/js/main-gsap.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
	<script th:src="@{/js/bootstrap.js}"></script>
	<script th:src="@{/js/joinable.js}"></script>
	<script th:src="@{/js/resizeable.js}"></script>
	<script th:src="@{/js/neon-api.js}"></script>
	<script th:src="@{/js/jquery.knob.js}"></script>
	<script th:src="@{/js/neon-chat.js}"></script>
	<script th:src="@{/js/neon-custom.js}"></script>
	<script th:src="@{/js/neon-demo.js}"></script>

</body>
</html>